<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Prototype Lab 1</title>
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				color: #B088FF;
				font-size: 12pt;
			}
			
			div.titleText {
				font-style: italic;  /* 斜體字 */
			}
			
			div.contentText {
				font-style: normal;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var str = "text";
				var foo = {
					height: 500,
					width: 300,
					move: function( left, top ) {
						alert( "this.width: " + this.width + "\n" + "this.height: " + this.height );
						alert( 
							"move left: " + ( this.width + left ) + "\n" + 
							"move top: " + ( this.height + top ) + "\n"
						);
					}
				};
				
				var bar = function( _domId, _cssClass, prototypeCallback ) {
					this.domId = _domId;        // 私有特性
					this.cssClass = _cssClass;  // 私有特性
					prototypeCallback();
				};
				
				var sonOfBar = function( _domId, _cssClass, _float, callback ) {
					this.super = bar;  // 指派bar所參照的匿名函式給super私有特性
					this.super( _domId, _cssClass, callback );
					
					if( _float != null && typeof( _float ) != "undefined" && _float != "" ) {
						this.float = _float;
					}
				}
				
				var boo = {};
				
				// alert( "typeof( str ) is " + typeof( str ) );
				// 印出string
				
				/*
				if(	str instanceof String ) {
					alert( "str is-a string!" );
				} else if( str instanceof Object ) {
					alert( "str is-a Object!" );
				} else if( typeof( str ) == "string" ) {
					// alert( "str is-a string!" );
					// 印出string
				}
				*/
				
				// alert( "typeof( bar ) is " + typeof( bar ) );
				// 印出function
				
				/*
				if( bar instanceof Object && typeof( bar ) == "function" && bar instanceof Function ) {
					alert( 
						"bar is-a Object!\n" + 
						"bar is-a Funciton\n" + 
						"typeof( bar ) is function"
					);
				}
				*/
				
				// var c = new bar();  // 產生bar指向的匿名函式實體，並且執行該匿名函式
				
				// var d = bar;  // 一般的匿名函式指派
				// d();  // 呼叫執行該匿名函式
				
				// 以下兩行為錯誤程式碼
				// var f = new foo();
				// var b = boo();
				
				var a = foo;
				// alert( "what is a " + typeof( a ) );
				
				//a.height += 100;
				//a.width += 50;
				//a.move( 150, 100 );
				
				bar.prototype = {
					width: 500,
					height: 400,
					//moveNow: function() {
					//	alert( 
					//		"move left: " + ( this.width + left ) + "\n" + 
					//		"move top: " + ( this.height + top ) + "\n"
					//	);
					//},
					barName: "John",
					tellMyName: function() {
						alert( "Hi! I'm " + this.barName );
					}
				};
				
				function moveNow( left, top ) {
					alert( 
						"parameter left: " + left + "\n" + 
						"parameter top: " + top + "\n" + 
						"move left: " + ( bar.prototype.width + left ) + "\n" + 
						"move top: " + ( bar.prototype.height + top ) + "\n"
					);
				}
				
				var moveNowDelegate = function() {
					moveNow( 3, 5 );
				};
				
				var target = document.getElementById( "header" );
				
				var dom = new bar( target.id, target.className, moveNowDelegate );  // 呼叫並執行bar所指向的匿名函式
				alert(
					"dom.domId: " + dom.domId + "\n" + 
					"dom.cssClass: " + dom.cssClass + "\n" + 
					"dom.width: " + dom.width + "\n" + 
					"dom.height: " + dom.height + "\n" + 
					"dom.barName: " + dom.barName + "\n" + 
					"dom.tellMyName: " + dom.tellMyName
				);
				
				
				sonOfBar.prototype = dom;
				var content = document.getElementById( "content" );
				var son = new sonOfBar( content.id, content.className, "floating...", moveNowDelegate );
				alert(
					"son.domId: " + son.domId + "\n" + 
					"son.cssClass: " + son.cssClass + "\n" + 
					"son.float: " + son.float + "\n" + 
					"son.width: " + son.width + "\n" + 
					"son.height: " + son.height + "\n" + 
					"son.tellMyName: " + son.tellMyName
				);
				
				sonOfBar.prototype = new bar( target.id, target.className, moveNowDelegate );
				var sub = new sonOfBar();
				alert(
					"son.domId: " + son.domId + "\n" + 
					"son.cssClass: " + son.cssClass + "\n" + 
					"son.float: " + son.float + "\n" + 
					"son.width: " + son.width + "\n" + 
					"son.height: " + son.height + "\n" + 
					"son.tellMyName: " + son.tellMyName
				);
				
				
				/*
				var n = new bar();
				n.x = 777;
				n.method = function() {
					alert( "new prototype method here!" );
				};
				*/
				
				// alert( "n.x is " + n.x );
				// alert( "n.method is " + n.method );
			}
		</script>
		
	</head>
	
	<body>
		<div title="temp1" id="header" class="titleText">Hello HTML</div>
		<div title="temp1" id="content" class="contentText">Here is content</div>
	</body>
</html>